<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <span class="input-number">
      <span class="prefix-box" v-if="prefixIconId">
        <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
      </span>
      <el-input-number
        v-model="pageData[currNode.name]"
        :controls="false"
        @change="handleChange"
        v-bind="options"
      />
      <span class="suffix-box" v-if="suffixIconId">
        <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
      </span>
    </span>
  </div>
</template>

<script setup>
import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const pageData = inject("pageData");
const prefixIconId = ref('');
const suffixIconId = ref('');
const currNode = ref(props.node);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  const compStyle = currNode.value.currCompStyle || {};
  prefixIconId.value = compStyle['prefixIcon'] || '';
  suffixIconId.value = compStyle['suffixIcon'] || '';
  await nextTick(() => initializing.value = false);
};

const loadValue = async() => {
  const dataList = (await visual.loadData(
    currNode.value.compData,
    eventHandler,
    getData(),
    currNode.value)).data || [];
  const value = dataList.length > 0 && dataList[0]['内容'];
  if (value || value === 0) {
    pageData.value[currNode.value.name] = parseFloat(value + '');
  } else {
    pageData.value[currNode.value.name] = null;
  }
};

const options = computed(() => {
  const compStyle = currNode.value.currCompStyle || {};
  const options = {};
  visual.addIfNotNull(options, compStyle, 'size');
  visual.addIfNotNull(options, compStyle, 'min');
  visual.addIfNotNull(options, compStyle, 'max');
  visual.addIfNotNull(options, compStyle, 'precision');
  visual.addIfNotNull(options, compStyle, 'placeholder');
  visual.addIfNotNull(options, compStyle, 'required');
  visual.addIfNotNull(options, compStyle, 'readonly');
  visual.addIfNotNull(options, compStyle, 'disabled');
  visual.addIfNotNull(options, compStyle, 'autocomplete');
  return options;
});

const handleChange = () => {
  eventHandler.trigger('变更事件');
};

const getData = () => {
  return {
    inputParam: currNode.value.inputParam,
    value: pageData.value[currNode.value.name]
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  initializing.value = true;
  await loadValue();
  await nextTick(() => initializing.value = false);
};

onMounted(async() => {
  await init();
  await loadValue();
  await eventHandler.trigger('初始化事件');
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped>
.input-number {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.input-number :deep(.el-input-number) {
  width: 100%;
}
.input-number :deep(.el-input-number--small) {
  padding: 0;
  text-align: left;
  width: 100%;
}
.input-number :deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.input-number:has(.prefix-box) :deep(.el-input__wrapper) {
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
.input-number:has(.suffix-box) :deep(.el-input__wrapper) {
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
}
.input-number :deep(.prefix-box) {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
}
.input-number :deep(.suffix-box) {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
}
</style>